<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>交易记录</title>
</head>
<body>
<div class="content-wrapper">
    <div class='row' style='margin-bottom: -50px'>
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card" >
                <div class='card-body' style="padding: 50px;" >
                    <div class="col-md-12">
                        <div th:if="${!hasOrder}" style="height: 300px">
                            <h5>您还没有过与我们合作的经历，快与我们取得联系吧！</h5>
                        </div>
                        <div th:if="${hasOrder}">
                            <div class="col-md-4 updateMenu-title-left" style="margin:0px 0px 10px 0px; padding: 0px">
                                <h4 class="card-title" style="width: 300px;font-size: 25px">消费记录</h4>
                                <p class="card-description" style="margin-bottom: 0px">用户所在公司在我公司的消费、服务明细</p>
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend" >
                                    <select id="modal_parm" class="magic btn btn-warning " style="border-radius: 10px 10px 10px 10px" >
                                        <option value="sulfurDioxide">成交时间</option>
                                        <option value="nitrogenOxide">完成状态</option>
                                        <option value="particulate">成交金额</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12 grid-margin stretch-card" th:each="order,iterStat:${orderList}" style="margin-top: 10px;margin-bottom: 20px ;padding: 0px;">
                                <div class="card" style="background-color:#F6FFF3; border-radius: 10px">
                                    <div class="card-body" >
                                        <div class="form-inline col-md-12" style="padding: 0px">
                                            <div class="form-inline col-md-5" style="padding-left: 0px">
                                                <h5>订单号：</h5>
                                                <h5 th:text="${order.UUID}"></h5>
                                            </div>
                                            <div class="form-inline col-md-4" >
                                                <h5>总价：</h5>
                                                <h5 th:text="${order.totalPrice}"></h5>
                                                <h5>元</h5>
                                            </div>
                                            <div class="col-md-1 transection-state">
                                                <img th:if="${order.state}" src="/static/images/menuimg/transection-finish.png" >
                                                <img th:if="${!order.state}" src="/static/images/menuimg/transection-definish.png" >
                                            </div>
                                        </div>
                                        <!--<p class="card-description">-->
                                        <!--Add class <code>.table-hover</code>-->
                                        <!--</p>-->
                                        <div class="table-responsive">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr class="tr-transection">
                                                    <th>商品名</th>
                                                    <th>规格</th>
                                                    <th>单位</th>
                                                    <th>数量</th>
                                                    <th>单价</th>
                                                    <th>折扣</th>
                                                    <th>小计</th>
                                                    <th>状态</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr class="tr-transection" th:each="orderItem,iterStat:${order.orderItemList}">
                                                    <td th:text="${orderItem.product.name}"></td>
                                                    <td th:text="${orderItem.product.specification.specification}"></td>
                                                    <td th:text="${orderItem.product.unit}"></td>
                                                    <td th:text="${orderItem.number}"></td>
                                                    <td th:text="${orderItem.product.specification.price}+'元'"></td>
                                                    <td>
                                                        <span th:if="${orderItem.discount} eq 0">——</span>
                                                        <div th:if="${orderItem.discount} ne 0" class="text-success">
                                                            <span th:text="${orderItem.discount}+'%'"></span>
                                                            <i class="mdi mdi-arrow-down"></i>
                                                        </div>
                                                    </td>
                                                    <td th:text="${orderItem.price}+'元'"></td>
                                                    <td>
                                                        <label th:if="${orderItem.state} eq 1" class="badge badge-info col-md-6">已付款</label>
                                                        <label th:if="${orderItem.state} eq 2" class="badge badge-warning col-md-6">施工中</label>
                                                        <label th:if="${orderItem.state} eq 3" class="badge badge-success col-md-6">已完成</label>
                                                    </td>
                                                </tr>
                                                <tr class="tr-transection">
                                                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="form-inline">
                                            <div class="col-md-9 form-inline">
                                                <div class="form-inline col-md-6" >
                                                    <div th:if="${order.time} ne null">
                                                        <span style="font-size: 20px">成交日期：</span>
                                                        <span style="padding-right: 10px;font-size: 20px" th:text="${order.getTime('yyyy-MM-dd')}"></span>
                                                        <span style="font-size: 20px" th:text="${order.getTime('EEE')}"></span>
                                                    </div>
                                                </div>
                                                <div class="form-inline col-md-6" >
                                                    <span th:if="${order.payTime} eq null" style="font-size: 20px;color: orangered">未结款</span>
                                                    <div th:if="${order.payTime} ne null">
                                                        <span style="font-size: 20px">结款日期：</span>
                                                        <span style="padding-right: 10px;font-size: 20px" th:text="${order.getPayTime('yyyy-MM-dd')}"></span>
                                                        <span style="font-size: 20px" th:text="${order.getPayTime('EEE')}"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-inline col-md-3" >
                                                <h5>销售员：</h5>
                                                <h5 th:text="${order.salesPersion}"></h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>